<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" href="static/css/toastr.css">

    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/toastr.min.js"></script>
    <script src="static/js/core.util.js"></script>
    <script src="js/url.js"></script>

</head>
<body>
<div id="wrap">
    <div id="top_content">
        <div id="header">
            <div id="rightheader">
                <p>
                    <br/>
                </p>
            </div>

            <div id="topheader">
                <h1 id="title">
                    <a href="#">WhatIsJava</a>
                </h1>
            </div>
            <div id="navigation">
            </div>
        </div>
        <div id="content">
            <p id="whereami">
                <a href="register.html">新增</a>
            </p>
            <h1>
                用户列表
            </h1>
            <!-- 模糊查询表单 -->
            <form name="form1" method="post">
                <table class="form_table">
                    <tr>
                        <td>用户名</td>
                        <td><input type="text" name="username" value=""/></td>
                        <td>性别</td>
                        <td><select name="sex">
                            <option value="">请选择</option>
                            <option value="1">男</option>
                            <option value="0">女</option>
                        </select></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>地址</td>
                        <td><input type="text" name="address" value=""/></td>
                        <td>创建时间</td>
                        <td><input type="text" name="createDate" id="createDate" value=""/></td>
                        <td><input type="reset" value="重置" class="button"/>
                            <input type="button" value="查询" onclick="javascript:jump(1)" class="button"/></td>
                    </tr>

                </table>
            </form>
            <table class="table" id="tableId">
                <thead>
                <tr class="table_header">
                    <td>编号</td>
                    <td>用户名</td>
                    <td>密码</td>
                    <td>性别</td>
                    <td>爱好</td>
                    <td>地址</td>
                    <td>邮编</td>
                    <td>创建时间</td>
                    <td>操作</td>
                </tr>
                </thead>
                <tbody>
                <tr class="row1">
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>
                        <a href='javascript:updateUser()'>修改</a>
                        <a href='javascript:delUser()'>删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <p>
                <a href="javascript:jump(1)">首页</a>
                上一页 下一页
                尾页
                共？页 当前页？总共？条数据
            </p>
        </div>
    </div>

    <div id="footer">
        <div id="footer_bg">whatisJavaWeb@ifly.com</div>
    </div>
</div>
</body>

<script type="text/javascript">
    //分页查询事件
    function jump(curpage) {

    }

    // 删除方法
    function delUser(userId) {
        var flag = confirm("是否删除？");
        if (flag) {
            // 基于ajax，通过id删除用户。
            CoreUtil.sendAjax(url + 'user/del.action/' + userId, "", function (res) {
                if (res.code == 0) {
                    // 刷新页面
                    toastr.success(res.msg);
                    load(); // 刷新页面！
                } else {
                    toastr.error(res.msg);
                }
            })
        }
        ;
    }

    //修改方法
    function updateUser(userId) {
        sessionStorage.setItem("userId", userId);
        // 可以
        window.location.href = "modify.html";
    }

    function load() {
        CoreUtil.sendAjax(url + 'user/user.action', '{"type":"queryall"}', function (res) {

            // json字符串和json对象比较。
            var userListJsonObject = res.data;
            var userListJsonString = JSON.stringify(userListJsonObject);

            // 把后台返回的数据( res.data ) 临时保存到sessionStorage
            sessionStorage.setItem("userList", userListJsonString);

            // 请求成功，将返回的信息中的用户列表提取出来，并拼接成表格字符串
            // 先清空原有表格内容
            $('#tableId tbody').empty();
            for (let i = 0; i < res.data.length; i++) {
                let u = res.data[i];
                let tr = '<tr class="row' + (i % 2 + 1) + '">';
                tr += '<td>' + u.id + '</td>';
                tr += '<td>' + u.username + '</td>';
                tr += '<td>' + u.pwd + '</td>';
                tr += '<td>' + u.sex + '</td>';
                tr += '<td>' + u.love + '</td>';
                tr += '<td>' + u.address + '</td>';
                tr += '<td>' + u.email + '</td>';
                tr += '<td>' + u.createDate + '</td>';
                tr += '<td><a href="javascript:updateUser(' + u.id + ');">修改</a> | <a href="javascript:delUser(' + u.id + ');">删除</a>';
                tr += '</td>';
                tr += '</tr>';
                $('#tableId tbody').append(tr);
            }
        });
    }

    load();
</script>
</html>


